<script setup>
import {ref} from 'vue'
import {fpRoleAPI} from "@/apis/system/role/role";
import {ElMessage} from "element-plus";

const isVisible = ref(false)
const checkList = ref([])
const roleList = ref([])
const uid = ref([])

const close = () => {
  isVisible.value = false
}
const submit = async () => {
  const {data: res} = await fpRoleAPI(uid.value, checkList.value)
  if (res.code == 200) {
    ElMessage.success(res.data)
    isVisible.value = false
  } else {
    ElMessage.error(res.message)
  }
}
defineExpose({isVisible, roleList, checkList, uid})
</script>

<template>
  <el-dialog @close="close()" :model-value="isVisible" title="分配角色" width="30%" center>
    <el-checkbox-group v-model="checkList">
      <el-row v-for="item in roleList">
        <el-checkbox :label="item.id" :key="item.id">{{ item.roleName }}</el-checkbox>
      </el-row>
    </el-checkbox-group>
    <template #footer>
      <span class="dialog-footer">
          <el-button type="primary" @click="submit()">
          提交
        </el-button>
        <el-button @click="close()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
